<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div style="margin-top: 15px">
                <el-input placeholder="请输入内容" class="input-with-select" v-model="add.query">
                  <el-button slot="append" icon="el-icon-search" @click="cx"></el-button>
                </el-input>
              </div></div
          ></el-col>
          <el-col :span="4"
            ><div class="grid-content bg-purple">
              <el-button type="primary" @click="tj=true">添加</el-button>
            </div></el-col
          >
        </el-row>
      </div>
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="username" label="姓名"> </el-table-column>

        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态">     
              <template v-slot="ss">
               <el-switch
  v-model="ss.row.mg_state"
  active-color="#13ce66"
  inactive-color="#ff4949" 
        @change="zt(ss.row)"
  >
</el-switch>

              </template>

        </el-table-column>
        <el-table-column label="操作">
              <template v-slot="xg">
                      <el-button-group>     
  <el-button type="warning" icon="el-icon-edit" @click="xgg(xg.row)"></el-button>
  <el-button type="primary" icon="el-icon-share" ></el-button>
  <el-button type="danger" icon="el-icon-delete" @click="sc(xg.row)"></el-button>
</el-button-group>
              </template>


      
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
    
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="add.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
        <!-- 修改 -->
      <div>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
>
  <span>  
<el-form  :model="formLabelAlign">
  <el-form-item label="名称">
    <el-input v-model="formLabelAlign.username"  disabled></el-input>
    
  </el-form-item>
  <el-form-item label="活动区域">
    <el-input v-model="formLabelAlign.email"></el-input>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input v-model="formLabelAlign.mobile"></el-input>
  </el-form-item>
</el-form>
  </span>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="ggl">确 定</el-button>
  </span>
</el-dialog>



      </div>

      <!-- 添加 -->
      <div>


<el-dialog
  title="提示"
  :visible.sync="tj"
  width="30%"
  >
 <el-form  :model="zz">
  <el-form-item label="名称">
    <el-input v-model="zz.username"></el-input>
  </el-form-item>
  <el-form-item label="手机">
    <el-input v-model="zz.email"></el-input>
  </el-form-item>
  <el-form-item label="邮箱">
    <el-input v-model="zz.mobile"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="zz.password"></el-input>
  </el-form-item>

</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="tj = false">取 消</el-button>
    <el-button type="primary" @click="jj">确 定</el-button>
  </span>
</el-dialog>

      </div>

  </div>
  
</template>

<script>
export default {
  data() {
    return {
      zz:{
        username:'',
        password:'111',
        email:'',
        mobile:''
      },
      tj:false,
      formLabelAlign:{
        mobile:'',
        email:''
      },
         dialogVisible: false,
      tableData: [],
      add: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      total: 0,
      tybole: [],
    };
  },
  created() {
    this.googet();
  },
  methods: {
    async cx(){
             await this.axios.get(`/users/${Number(this.add.id)}`)
                  
             this.googet()
    },
    async zt(ev){
      
         await this.axios.put(`/users/${ev.id}/state/${ev.mg_state}`)
     
    },
   async jj(){
                await this.axios.post('/users',this.zz)
                    this.tj=false
    },
    async ggl(){
              let res = await this.axios.put(`users/${this.formLabelAlign.id}`,{ 
                 mobile:this.formLabelAlign.mobile,
        email:this.formLabelAlign.email
              })
              console.log(res);

              this.googet()
              this.dialogVisible=false


    },
    xgg(ev){
      console.log(ev);
      this.dialogVisible=true
      this.formLabelAlign=ev
    },

     async sc(ev){

         await this.axios.delete(`users/${ev.id}`)
      
            this.googet()
    },
    async googet() {
      let { data: res } = await this.axios.get("/users", { params: this.add });

      this.total = res.data.total;

      this.tableData = res.data.users;
    },
    handleSizeChange(val) {
      this.add.pagesize = val;
      this.googet()
    },
    handleCurrentChange(val) {
      this.add.pagenum = val;
      this.googet()
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 20px;
}
.el-row {
  display: flex;
  align-items: center;
}
</style>